<template>
	<view class="wanladvert-container" :style="{ height: windowHeight + 'px' }">
		<image class="img" :src="banner" mode=""></image>
		<view class="contentBox">
			<image class="titleImg" src="../static/images/find/title.png" mode=""></image>
			<view class="content" v-if="list.length>0">
				<view class="list" v-for="(i, v) in list" :key="v">
					<view class="listImg">
						<image :src="i.image" mode="" class="listImg"></image>
					</view>
					<view class="listRight">
						<view class="title">{{ i.name }}</view>
						<view class="num">
							¥{{ i.sum_price }}
							<view class="total">/¥{{ i.money }}</view>
							<view class="success" v-if="`${100 * (i.sum_price / i.money)}`=='100'">已完成</view>
						</view>
						<view class="line">
							<view class="linered" :style="{ width: `${100 * (i.sum_price / i.money)}%` }"></view>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="padding: 30rpx 0;">
				<u-empty mode="data" :text="$t('newFind.empty.text')"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				windowHeight: 0,
				statusBar: 0,
				countdown: 3, // 修改广告倒计时
				cTimer: null,
				banner: "",
				list: [],
			};
		},
		computed: {
			...mapState(["common", "user"]),
		},
		onReady() {
			var wanlsys = this.$wanlshop.wanlsys();
			this.windowHeight = wanlsys.windowHeight;
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true);
			this.statusBar = wanlsys.top - 4;
			// #endif
			// #ifdef MP
			this.statusBar = wanlsys.top + 5;
			// #endif
			// #ifdef H5
			this.statusBar = 15;
			// #endif
			uni.createVideoContext("advertVideo").hideStatusBar();
		},
		onLoad() {
			// uni.getNetworkType({
			//   success: (res) => {
			//     if (res.networkType == "none") {
			//       uni.redirectTo({
			//         url: "/pages/page/no_network",
			//         animationType: "fade-in",
			//         animationDuration: 200,
			//       });
			//     } else {
			//       this.loadExecution();
			//     }
			//   },
			// });
		},
		onShow() {
			let that = this
			let user = uni.getStorageSync("wanlshop:user")
			if (user) {
				this.getList();
			} else {
				uni.showModal({
					title: "提示",
					content: "未登录,是否登录?",
					success(res) {
						if (res.confirm) {
							that.$wanlshop.to("/pages/user/auth/auth");
						} else {
							uni.switchTab({
								url: "/pages/index",
							});
						}
					}
				})
			}
		},
		methods: {
			getList() {
				uni.request({
					url: "/user/activity",
					method: "POST",
					data: {},
					// 1.1.8 升级
					complete: (res) => {
						if (res.res.code == 1) {
							this.banner = res.res.data.activity_image;
							this.list = res.res.data.list;
						}
					},
				});
			},
			loadExecution() {
				/**
				 * 获取本地存储中launchFlag的值
				 * 若存在，说明不是首次启动，直接进入首页；
				 * 若不存在，说明是首次启动，进入引导页；
				 */
				try {
					const value = uni.getStorageSync("wanlshop:launch");
					if (value || this.$store.state.common.adData.firstAdverts.length == 0) {
						if (value == true) {
							this.startTimer();
						} else {
							this.clearTimerGuide();
						}
					} else {
						uni.setStorage({
							key: "wanlshop:launch",
							data: true,
							success: (res) => {
								console.log("存储launchFlag");
							},
						});
						this.clearTimerGuide();
					}
				} catch (e) {
					// error
					uni.setStorage({
						key: "wanlshop:launch",
						data: true,
						success: (res) => {
							console.log("error时存储launchFlag");
						},
					});
					this.clearTimerGuide();
				}
				return;
				this.clearTimerIndex();
			},

			outBtn() {
				this.clearTimerIndex();
			},
			outImage() {
				this.clearTimerIndex();
			},
			startTimer() {
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimerIndex();
						}
					}, 1000);
				}
			},
			clearTimerIndex() {
				clearInterval(this.cTimer);
				this.cTimer = null;
				uni.switchTab({
					url: "/pages/index",
				});
			},
			clearTimerGuide() {
				uni.redirectTo({
					url: "/pages/guide",
				});
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
		},
	};
</script>

<style lang="scss">
	.wanladvert-container {
		position: relative;
		width: 100%;
		overflow: hidden;

		.img {
			width: 100%;
		}

		.contentBox {
			background: #fff;
			border-radius: 20rpx;
			position: absolute;
			top: 338rpx;
			left: 5%;
			width: 90%;
			padding-bottom: 40rpx;

			.titleImg {
				width: 248rpx;
				height: 100rpx;
				display: flex;
				margin: 10rpx auto;
			}

		}

		.content {
			height: 50vh;
			overflow: scroll;
			padding: 0 20rpx;

			.list {
				display: flex;
				margin-top: 30rpx;

				.listImg {
					width: 140rpx;
					height: 140rpx;
					background: red;
					flex-shrink: 0;
				}

				.listRight {
					margin-left: 20rpx;
					flex: 1;

					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.num {
						color: #327CFF;
						font-size: 24rpx;
						margin-top: 30rpx;
						display: flex;
						position: relative;

						.total {
							color: #666666;
						}
					}

					.line {
						width: 100%;
						height: 16rpx;
						border-radius: 120rpx 120rpx 120rpx 120rpx;
						border: 1rpx solid #c1c1c1;
						margin-top: 30rpx;
						overflow: hidden;
					}

					.success {
						width: 88rpx;
						height: 32rpx;
						background: #327CFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #fff;
						text-align: center;
						position: absolute;
						right: 0rpx;
						top: 20rpx;
					}

					.linered {
						background: #327CFF;
						height: 15rpx;
						border-radius: 120rpx 120rpx 120rpx 120rpx;
					}
				}
			}
		}
	}
</style>